<template>
	<view class="container">
		<view class="pay_1">{{serveInfo.category.name}}</view>
		<view class="pay_2">
			<view class="flex">
				<up-image width="115rpx" height="115rpx" :src="serveInfo.icon" :lazy-load="true"
					mode="aspectFill"></up-image>
				<view class="" style="margin-left: 20rpx;font-size: 35rpx;">
					<view class="">
						{{serveInfo.serviceName}}
					</view>
					<view style="font-size: 30rpx;margin-top: 5rpx;color: #fd4c1a;">
						￥{{(serveInfo.servicePrice*serveInfo.discount).toFixed(2)}}
						/
						{{filterType(serveInfo.priceType)}} <span
							style="color:#9c9c9c;text-decoration: line-through;">￥{{(serveInfo.servicePrice).toFixed(2)}}/{{filterType(serveInfo.priceType)}}</span>
					</view>
				</view>
			</view>
			<!-- <view class="" style="margin: 30rpx 0;">
				规格
			</view>
			<view class="ggjs">
				规格规格规格规格规格规格规格规格规格规格规格规格
			</view> -->
		</view>
		<view class="flex hcenter pay_3">
			<view class="">数量</view>
			<view class="flex">
				<up-number-box v-model="order.buyCount" :min="1"></up-number-box>
			</view>
		</view>
		<view class="flex pay_4">
			<view class="text">优惠</view>
			<view class="youhui">￥{{ (originalPrice - discountPrice).toFixed(2) }}</view>
			<view class="text">小计</view>
			<view class="xiaoji">￥{{discountPrice}}元</view>
		</view>
		<view class="pay_5">
			<view class="">服务时间</view>
			<view class="" style="margin-top:20rpx;color:#9c9c9c;">{{serveInfo.serviceTime}}</view>
		</view>
		<view class="flex hcenter pay_6" @click="selectAddress">
			<view v-if="addressInfo.name">
				<view class="" style="font-weight: 600;margin-bottom: 5rpx;">
					联系人：{{addressInfo.name}} {{addressInfo.mobile}}
				</view>
				<view class="" style="color: #535353;">
					联系地址：{{addressInfo.provinceName}} {{addressInfo.urbanName}} {{addressInfo.areaName}}
					{{addressInfo.address}}
				</view>
			</view>
			<view v-else class="address">选择收货地址</view>
			<view class="">
				<image class="img" src="/static/img/yjtBlack.png"></image>
			</view>
		</view>
		<view class="flex hcenter pay_7">
			<view style="margin-right: 20rpx;">
				备注
			</view>
			<up-input v-model="order.remark" border="none" placeholder="备注说明" clearable></up-input>

		</view>

		<view class="footer hcenter">
			<view class="flex wcenter button consult" style="">
				<view class="flex wcenter" style="margin: 0 0 5rpx 0;color:#fd4c1a;align-items: flex-end">
					<view style="padding-bottom: 4rpx;">合计￥</view>
					<view style="font-size:46rpx;color:#ff6700">{{discountPrice}}</view>
				</view>
				<view>
					共1件 已优惠￥{{ (originalPrice - discountPrice).toFixed(2)}}
				</view>
			</view>

			<view class="flex hcenter wcenter button" style="width: 300rpx;">
				<up-button :loading="submitLoading" color='#cf0003' shape="circle" text="提交订单"
					@click="submitOrder"></up-button>
			</view>
		</view>
		<view class="viewbottom" style="height: 166rpx;line-height:166rpx"></view>
	</view>
</template>


<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		serviceDetailApi
	} from '@/api/service.js'
	import {
		addressDefaultApi,
		getAddressApi
	} from '@/api/user.js'
	import {
		createOrderApi
	} from '@/api/order.js'
	import {
		playOrder
	} from '@/utils/play.js'
	import filterType from '@/utils/priceType.js'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				serveInfo: {
					servicePrice: 0,
					serviceName: '',
					priceType: 0,
					category: {
						name: "",
					},
				},
				order: {
					addressId: null,
					serviceId: null,
					remark: '',
					buyCount: 1,
					money: computed(() => (state.order.buyCount * state.serveInfo.servicePrice * state.serveInfo
							.discount)
						.toFixed(2)),
				},
				submitLoading: false,
				addressInfo: {},
				originalPrice: 0,
				discountPrice: 0,
			})
			onLoad((option) => {
				uni.setNavigationBarTitle({
					title: "提交订单"
				})
				state.order.serviceId = option.id;
				getData()
				uni.$on('updateAddress', (res) => {
					getSelectAddr(res)
				})
				getAddress()
			})
			onUnload(() => {
				uni.$off('updateAddress')
			})

			// 获取服务产品信息
			const getData = async () => {
				const {
					data
				} = await serviceDetailApi(state.order.serviceId)
				state.serveInfo = data
			}
			// 收货地址选择
			const selectAddress = () => {
				uni.navigateTo({
					url: '/pages/my/address/index?type=1'
				})
			}
			// 获取默认收货地址
			const getAddress = async () => {
				const {
					data
				} = await addressDefaultApi()
				if (data) {
					state.addressInfo = data
					state.order.addressId = data.id
				}
			}
			const getSelectAddr = async (id) => {
				const {
					data
				} = await getAddressApi();
				console.log(data);
				if (data) {
					var f = data.find(w => w.id == id);
					state.addressInfo = f;
					state.order.addressId = f.id;
				}
			}
			//创建订单
			const submitOrder = async () => {
				state.submitLoading = true
				try {
					const {
						data
					} = await createOrderApi(state.order)
					playOrder(data).then((res) => {
						uni.redirectTo({
							url: '/pages/order/success'
						});
					}).catch(() => {
						uni.redirectTo({
							url: '/pages/order/error'
						});
					})

				} catch {
					state.submitLoading = false
				}
			}
			state.originalPrice = computed(() => (state.order.buyCount * state.serveInfo.servicePrice).toFixed(2))
			state.discountPrice = computed(() => (state.order.buyCount * state.serveInfo.servicePrice * state.serveInfo
					.discount)
				.toFixed(2))
			return {
				...toRefs(state),
				filterType,
				submitOrder,
				selectAddress,
				getAddress,
				getSelectAddr
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		background: rgb(244, 244, 244);
	}

	.pay_1 {
		padding: 26rpx;
		background-color: #fff;
	}

	.pay_2 {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 26rpx;

		.ggjs {
			text-indent: 2em;
			color: #9c9c9c;
		}
	}

	.pay_3 {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 15rpx 30rpx 15rpx 20rpx;
		justify-content: space-between;

		.add {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1rpx solid #aaa;
			color: #ed6300;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
		}

		.input {
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			border-top: 1rpx solid #aaa;
			border-bottom: 1rpx solid #aaa;

		}

		.dec {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1rpx solid #aaa;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}
	}

	.pay_4 {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 34rpx 30rpx 20rpx 30rpx;
		justify-content: flex-end;
		align-items: flex-end;
		font-size: 30rpx;

		.text {
			font-weight: 600;
			margin-bottom: 3rpx;
			margin-left: 20rpx;
		}

		.youhui {
			color: #ed6300;
			margin-bottom: 3rpx;
		}

		.xiaoji {
			color: #f36900;
			font-size: 40rpx;
		}
	}

	.pay_5 {
		margin-top: 12rpx;
		background-color: #fff;
		padding: 26rpx 26rpx 30rpx 26rpx;
	}

	.pay_6 {
		margin-top: 12rpx;
		background-color: #fff;
		padding: 26rpx 32rpx 26rpx 30rpx;
		justify-content: space-between;
		font-size: 32rpx;

		.img {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.pay_7 {
		margin-top: 12rpx;
		background-color: #fff;
		padding: 20rpx 0 30rpx 30rpx;
	}

	.footer {
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 底部对齐 */
		width: 100%;
		/* 宽度100% */
		display: flex;
		/* 使用Flex布局 */
		height: 166rpx;
		background-color: #ffffff;
		justify-content: space-around
	}

	.button {
		// flex: 1;
		/* 各占50%的宽度 */
		text-align: center;
		/* 文本居中 */
		// padding: 10px 0;
		/* 上下内边距 */
	}

	.consult {
		width: 400rpx;
		flex-direction: column;
		font-size: 22rpx;
	}

	.address {
		display: flex;
	}
</style>